<template>
  <div class="branch">
    <el-card
      class="branch-card"
      shadow="hover"
    >
      <template #header>
        <div class="flex-align-center">
          <el-icon
            size="16"
            class="mr5"
          >
            <ele-PieChart />
          </el-icon>
          {{ $t("form.statistics.commonEquipment") }}
        </div>
      </template>
      <t-chart
        class="device-echart"
        :init-options="initOptions"
        :option="option"
        theme="tduck-echarts-theme"
      />
    </el-card>
  </div>
</template>

<script>
import TChart from "@/views/components/TChart/index.vue";
import { getFormDeviceRequest } from "@/api/project/report";
import { i18n } from "@/i18n";

export default {
  components: {
    TChart
  },
  props: {
    formKey: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      initOptions: {
        renderer: "svg"
      },
      option: {
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "right"
        },
        series: [
          {
            name: i18n.global.t("form.statistics.commonEquipment"),
            type: "pie",
            radius: ["82", "102"],
            center: ["32%", "50%"],
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: []
          }
        ]
      }
    };
  },
  created() {
    this.getProjectSubmitDevice();
  },
  methods: {
    getProjectSubmitDevice() {
      getFormDeviceRequest({ formKey: this.formKey }).then(res => {
        if (res.data && res.data.length) {
          this.option.series[0].data = res.data.map(item => {
            return {
              value: item.count,
              name: item.osName ? item.osName : i18n.global.t("form.statistics.other")
            };
          });
        }
      });
    }
  }
};
</script>
